<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222"><meta name="generator" content="Hexo 7.3.0">

  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.ico">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.ico">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha256-wiz7ZSCn/btzhjKDQBms9Hx4sSeUYsDrTLg7roPstac=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/5.0.28/fancybox/fancybox.css" integrity="sha256-6cQIC71/iBIYXFK+0RHAvwmjwWzkWd+r7v/BX3/vZDc=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/themes/green/pace-theme-minimal.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/pace.min.js" integrity="sha256-gqd7YTjg/BtfqWSwsJOvndl0Bxc8gFImLEkXQT8+qj0=" crossorigin="anonymous"></script>

<script class="next-config" data-name="main" type="application/json">{"hostname":"sumumm.github.io","root":"/","images":"/images","scheme":"Gemini","darkmode":false,"version":"8.19.2","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":{"enable":true,"style":"mac"},"fold":{"enable":true,"height":300},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":true,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":true,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/js/config.js"></script>

    <meta name="description" content="本文主要是Hexo框架下图标库使用的相关笔记，若笔记中有错误或者不合适的地方，欢迎批评指正😃。">
<meta property="og:type" content="article">
<meta property="og:title" content="LV02-NexT-05-图标库">
<meta property="og:url" content="https://sumumm.github.io/post/1a4570fb.html">
<meta property="og:site_name" content="苏木">
<meta property="og:description" content="本文主要是Hexo框架下图标库使用的相关笔记，若笔记中有错误或者不合适的地方，欢迎批评指正😃。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV02-NexT-05-%E5%9B%BE%E6%A0%87%E5%BA%93/img/007iconfont1.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV02-NexT-05-%E5%9B%BE%E6%A0%87%E5%BA%93/img/007iconfont2.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV02-NexT-05-%E5%9B%BE%E6%A0%87%E5%BA%93/img/007iconfont3.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV02-NexT-05-%E5%9B%BE%E6%A0%87%E5%BA%93/img/007iconfont4.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV02-NexT-05-%E5%9B%BE%E6%A0%87%E5%BA%93/img/007iconfont5.png">
<meta property="article:published_time" content="2023-07-02T08:17:01.000Z">
<meta property="article:modified_time" content="2025-06-13T16:25:57.073Z">
<meta property="article:author" content="苏木">
<meta property="article:tag" content="博客搭建">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV02-NexT-05-%E5%9B%BE%E6%A0%87%E5%BA%93/img/007iconfont1.png">


<link rel="canonical" href="https://sumumm.github.io/post/1a4570fb.html">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"https://sumumm.github.io/post/1a4570fb.html","path":"post/1a4570fb.html","title":"LV02-NexT-05-图标库"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>LV02-NexT-05-图标库 | 苏木</title>
  








    <script src="/js/browser_tools_disable.js"></script>

  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
<!-- hexo injector head_end start --><link rel="stylesheet" href="https://unpkg.com/hexo-next-tags-plus@latest/lib/tag_plus.css" media="defer" onload="this.media='all'"><!-- hexo injector head_end end --></head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <div class="column">
      <header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">苏木</p>
      <i class="logo-line"></i>
    </a>
      <p class="site-subtitle" itemprop="description">我的学习之路</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger" aria-label="搜索" role="button">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>苏木的家</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类页<span class="badge">42</span></a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档页<span class="badge">673</span></a></li><li class="menu-item menu-item-flink"><a href="/flink/" rel="section"><i class="fa fa-link fa-fw"></i>友人帐</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于我</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</header>
        
  
  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%80%E3%80%81Font-Awesome%E5%9B%BE%E6%A0%87%E5%BA%93"><span class="nav-text">一、Font Awesome图标库</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E7%AE%80%E4%BB%8B"><span class="nav-text">1. 简介</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E5%9B%BE%E6%A0%87%E5%BA%93%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="nav-text">2. 图标库的使用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#2-1-%E5%9F%BA%E7%A1%80%E5%BA%94%E7%94%A8"><span class="nav-text">2.1 基础应用</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#2-1-1-%E5%9F%BA%E7%A1%80%E5%BC%95%E7%94%A8%E6%A0%BC%E5%BC%8F"><span class="nav-text">2.1.1 基础引用格式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-1-2-%E5%9B%BE%E6%A0%87%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F"><span class="nav-text">2.1.2 图标添加样式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-1-3-%E5%9B%BE%E6%A0%87%E5%A4%A7%E5%B0%8F"><span class="nav-text">2.1.3 图标大小</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-2-%E8%BF%9B%E9%98%B6%E5%BA%94%E7%94%A8"><span class="nav-text">2.2 进阶应用</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#2-2-1-%E6%97%8B%E8%BD%AC%E5%9B%BE%E6%A0%87"><span class="nav-text">2.2.1 旋转图标</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-2-2-%E5%8A%A8%E6%80%81%E5%9B%BE%E6%A0%87"><span class="nav-text">2.2.2 动态图标</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BA%8C%E3%80%81iconfont%E9%98%BF%E9%87%8C%E7%9F%A2%E9%87%8F%E5%9B%BE%E6%A0%87%E5%BA%93"><span class="nav-text">二、iconfont阿里矢量图标库</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E7%99%BB%E5%BD%95%E6%B3%A8%E5%86%8C"><span class="nav-text">1. 登录注册</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E6%8C%91%E9%80%89%E5%9B%BE%E6%A0%87"><span class="nav-text">2. 挑选图标</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-%E6%B7%BB%E5%8A%A0%E5%88%B0%E9%A1%B9%E7%9B%AE"><span class="nav-text">3. 添加到项目</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-%E7%94%9F%E6%88%90%E4%BB%A3%E7%A0%81"><span class="nav-text">4. 生成代码</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-%E5%9B%BE%E6%A0%87%E5%BC%95%E7%94%A8"><span class="nav-text">5. 图标引用</span></a></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="苏木"
      src="/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">苏木</p>
  <div class="site-description" itemprop="description">莫道桑榆晚，为霞尚满天</div>
</div>
<div class="site-state-wrap animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">673</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">42</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
        <span class="site-state-item-count">43</span>
        <span class="site-state-item-name">标签</span>
      </div>
  </nav>
</div>
  <div class="links-of-author animated">
      <span class="links-of-author-item">
        <a href="https://github.com/sumumm" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;sumumm" rel="noopener me" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
  </div>

        </div>
      </div>
    </div>

    
  </aside>


    </div>

    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://sumumm.github.io/post/1a4570fb.html">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="苏木">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="苏木">
      <meta itemprop="description" content="莫道桑榆晚，为霞尚满天">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="LV02-NexT-05-图标库 | 苏木">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          LV02-NexT-05-图标库
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2023-07-02 16:17:01" itemprop="dateCreated datePublished" datetime="2023-07-02T16:17:01+08:00">2023-07-02</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/" itemprop="url" rel="index"><span itemprop="name">博客搭建</span></a>
        </span>
    </span>

  
    <span class="post-meta-break"></span>
    <span class="post-meta-item" title="本文字数">
      <span class="post-meta-item-icon">
        <i class="far fa-file-word"></i>
      </span>
      <span class="post-meta-item-text">本文字数：</span>
      <span>4.5k</span>
    </span>
    <span class="post-meta-item" title="阅读时长">
      <span class="post-meta-item-icon">
        <i class="far fa-clock"></i>
      </span>
      <span class="post-meta-item-text">阅读时长 &asymp;</span>
      <span>16 分钟</span>
    </span>
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody"><p>本文主要是Hexo框架下图标库使用的相关笔记，若笔记中有错误或者不合适的地方，欢迎批评指正😃。</p>
<span id="more"></span>

<!-- Photo: https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV02-NexT-05-%E5%9B%BE%E6%A0%87%E5%BA%93/img/ -->

<details class="folding-tag" blue><summary> 点击查看使用工具及版本 </summary>
              <div class='content'>
              <table>    <tr>        <td align="center" width=150px>Windows</td>        <td align="left">windows11</td>    </tr>    <tr>        <td align="center">Ubuntu</td>        <td align="left">Ubuntu16.04的64位版本</td>      </tr>    <tr>        <td align="center">VMware® Workstation 16 Pro</td>        <td align="left">16.2.3 build-19376536</td>      </tr></table>
              </div>
            </details>

<details class="folding-tag" blue><summary> 点击查看本文参考资料 </summary>
              <div class='content'>
              <table>    <tr><td align="center">参考方向  </td><td align="center">参考原文</td></tr>    <tr><td align="left">---</td><td align="left"><a href="" target="_blank">--- <i class="fa fa-external-link-alt"></i> </a></td></tr></table>
              </div>
            </details>

<details class="folding-tag" blue><summary> 点击查看相关文件下载 </summary>
              <div class='content'>
              <table>    <tr>        <td align="center">---</td>        <td align="left">--- <a href="" target="_blank">  <i class="fa fa-external-link-alt"></i></a></td>      </tr></table>
              </div>
            </details>

<p>在<code>NexT</code>主题中，默认是使用<code>Font Awesome</code>图标库的，它已经包含了大部分的图标，可以自定义显示的颜色，而且有些图标也支持动态效果，但是有一些需要用到的图标就不在可用之列了，这个时候就可以引入阿里矢量图标库(<code>iconfont</code>)来添加自己所需要的图标，本文将介绍如何使用<code>Font Awesome</code>图标库，以及如何引入和使用阿里矢量图标库(iconfont)。</p>
<h1 id="一、Font-Awesome图标库"><a href="#一、Font-Awesome图标库" class="headerlink" title="一、Font Awesome图标库"></a><font size=3>一、<code>Font Awesome</code>图标库</font></h1><h2 id="1-简介"><a href="#1-简介" class="headerlink" title="1. 简介"></a><font size=3>1. 简介</font></h2><p><code>Font Awesome</code>其实是一种字体，它提供可缩放矢量图标，不需要<code>JavaScript</code>支持，可以被定制大小、颜色、阴影以及任何可以用CSS的样式。它有两种版本，一种是<code>Free</code>的免费版本，一种是<code>Pro</code>的收费版本，收费版本的图标图标自然是比免费版本的要多喽，不过免费版的大部分就够用了，实在不行，还可以使用另一种图标库。</p>
<div class="note info"><table>
  <tr>
    <td align="center">名称</td>
    <td align="center">网址</td>
  </tr>
    <tr>
    <td align="center">开源项目仓库</td>
    <td align="left" style="color:#0593d3">https://github.com/FortAwesome/Font-Awesome</td>
  </tr>
    <tr>
    <td align="center">官网网址</td>
    <td align="left" style="color:#0593d3">https://fontawesome.com/</td>
  </tr>
</table></div>

<p>在<code>NexT</code>主题中已经自动安装并引用了相关的文件，这里便不再重复说明如何安装该图标库。</p>
<details class="note info no-icon"><summary><p>若有需求，可点此查看主题中引用该图标库的相关部分</p>
</summary>
<figure class="highlight yaml"><figcaption><span>yaml [blogRoot]/themes/next/_vendors.yml</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">fontawesome:</span></span><br><span class="line">  <span class="attr">name:</span> <span class="string">&#x27;@fortawesome/fontawesome-free&#x27;</span></span><br><span class="line">  <span class="attr">version:</span> <span class="number">5.15</span><span class="number">.3</span></span><br><span class="line">  <span class="attr">file:</span> <span class="string">css/all.min.css</span></span><br><span class="line">  <span class="attr">alias:</span> <span class="string">font-awesome</span></span><br><span class="line">  <span class="attr">integrity:</span> <span class="string">sha256-2H3fkXt6FEmrReK448mDVGKb3WW2ZZw35gI7vqHOE4Y=</span></span><br></pre></td></tr></table></figure>
</details>

<h2 id="2-图标库的使用"><a href="#2-图标库的使用" class="headerlink" title="2. 图标库的使用"></a><font size=3>2. 图标库的使用</font></h2><h3 id="2-1-基础应用"><a href="#2-1-基础应用" class="headerlink" title="2.1 基础应用"></a><font size=3>2.1 基础应用</font></h3><h4 id="2-1-1-基础引用格式"><a href="#2-1-1-基础引用格式" class="headerlink" title="2.1.1 基础引用格式"></a><font size=3>2.1.1 基础引用格式</font></h4><div class="tabs" id="first-unique-name"><ul class="nav-tabs"><li class="tab active"><a href="#first-unique-name-1">i 标签</a></li><li class="tab"><a href="#first-unique-name-2">span 标签</a></li></ul><div class="tab-content"><div class="tab-pane active" id="first-unique-name-1"><figure class="highlight html"><figcaption><span>html</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- this icon&#x27;s (1) style prefix == fas and (2) icon name == camera --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>示例：<i class="fas fa-camera"></i></p></div><div class="tab-pane" id="first-unique-name-2"><figure class="highlight html"><figcaption><span>html</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- using a &lt;span&gt; element to reference the icon --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span> </span><br></pre></td></tr></table></figure>
<p>示例：<i class="fas fa-camera"></i></p></div></div></div>

<h4 id="2-1-2-图标添加样式"><a href="#2-1-2-图标添加样式" class="headerlink" title="2.1.2 图标添加样式"></a><font size=3>2.1.2 图标添加样式</font></h4><div class="tabs" id="second-unique-name"><ul class="nav-tabs"><li class="tab active"><a href="#second-unique-name-1">添加span标签修改样式</a></li><li class="tab"><a href="#second-unique-name-2">直接修改样式</a></li></ul><div class="tab-content"><div class="tab-pane active" id="second-unique-name-1"><figure class="highlight html"><figcaption><span>html</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">&quot;font-size: 1em; color: #DA70D6;&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">&quot;font-size: 16px; color: #8A2BE2;&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">&quot;font-size: 1rem;&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">&quot;color:	#00BFFF;&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>
<div align="left">
  示例：<span style="font-size: 1em; color: #DA70D6;"><i class="fas fa-camera"></i></span>
  <span style="font-size: 16px; color: #8A2BE2;"><i class="fas fa-camera"></i></span>
  <span style="font-size: 1rem;">
    <span style="color:	#00BFFF;"><i class="fas fa-camera"></i></span>
  </span>
</div></div><div class="tab-pane" id="second-unique-name-2"><figure class="highlight html"><figcaption><span>html</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera&quot;</span> <span class="attr">style</span>=<span class="string">&quot;font-size: 1em; color: #DA70D6;&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera&quot;</span> <span class="attr">style</span>=<span class="string">&quot;font-size: 16px; color: #8A2BE2;&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera&quot;</span> <span class="attr">style</span>=<span class="string">&quot;font-size: 1rem; color:	#00BFFF;&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br></pre></td></tr></table></figure>
<div align="left">
  示例：<i class="fas fa-camera" style="font-size: 1em; color: #DA70D6;"></i>
  <i class="fas fa-camera" style="font-size: 16px; color: #8A2BE2;"></i>
  <i class="fas fa-camera" style="font-size: 1rem; color:	#00BFFF;"></i>
</div></div></div></div>

<h4 id="2-1-3-图标大小"><a href="#2-1-3-图标大小" class="headerlink" title="2.1.3 图标大小"></a><font size=3>2.1.3 图标大小</font></h4><p>图标的大小除了可以直接添加样式来改变之外，还可以在引用的时候改变，这就方便了在不修改主题源码的情况下改变主题中显示的图标的大小，这中样式下，可以指定基准字体的大小，来确定图标的相对大小，当然也可以不指定，这样将采取默认的方式。</p>
<details class="note info no-icon"><summary><p>点击查看图标大小对应关系</p>
</summary>
<table>
    <tr><td align="center">Class</td><td align="center">Size</td><tr>
    <tr><td align="center">fa-xs</td><td align="center">.75em</td><tr>
    <tr><td align="center">fa-sm</td><td align="center">.875em</td><tr>
    <tr><td align="center">fa-lg</td><td align="center">1.33em</td><tr>
    <tr><td align="center">fa-2x</td><td align="center">2em</td><tr>
    <tr><td align="center">fa-3x</td><td align="center">3em</td><tr>
    <tr><td align="center">fa-4x</td><td align="center">4em</td><tr>
    <tr><td align="center">fa-5x</td><td align="center">5em</td><tr>
    <tr><td align="center">fa-6x</td><td align="center">6em</td><tr>
    <tr><td align="center">fa-7x</td><td align="center">7em</td><tr>
    <tr><td align="center">fa-8x</td><td align="center">8em</td><tr>
    <tr><td align="center">fa-9x</td><td align="center">9em</td><tr>
    <tr><td align="center">fa-10x</td><td align="center">10em</td><tr>
</table>
</details>

<div class="tabs" id="third-unique-name"><ul class="nav-tabs"><li class="tab active"><a href="#third-unique-name-1">不指定基准字体大小</a></li><li class="tab"><a href="#third-unique-name-2">rem为单位</a></li><li class="tab"><a href="#third-unique-name-3">px为单位</a></li></ul><div class="tab-content"><div class="tab-pane active" id="third-unique-name-1"><figure class="highlight html"><figcaption><span>html</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera fa-xs&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera fa-sm&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera fa-lg&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera fa-2x&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera fa-3x&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera fa-5x&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera fa-7x&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera fa-10x&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br></pre></td></tr></table></figure>
<div align="left">
  示例：
  <div>
    <i class="fas fa-camera fa-xs"></i>
    <i class="fas fa-camera fa-sm"></i>
    <i class="fas fa-camera fa-lg"></i>
    <i class="fas fa-camera fa-2x"></i>
    <i class="fas fa-camera fa-3x"></i>
    <i class="fas fa-camera fa-5x"></i>
    <i class="fas fa-camera fa-7x"></i>
    <i class="fas fa-camera fa-10x"></i>
  </div>
</div></div><div class="tab-pane" id="third-unique-name-2"><figure class="highlight html"><figcaption><span>html</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">&quot;font-size: 0.5rem;&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera fa-xs&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera fa-sm&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera fa-lg&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera fa-2x&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera fa-3x&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera fa-5x&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera fa-7x&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera fa-10x&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<div align="left">
  示例：
  <div style="font-size: 0.5rem;">
    <i class="fas fa-camera fa-xs"></i>
    <i class="fas fa-camera fa-sm"></i>
    <i class="fas fa-camera fa-lg"></i>
    <i class="fas fa-camera fa-2x"></i>
    <i class="fas fa-camera fa-3x"></i>
    <i class="fas fa-camera fa-5x"></i>
    <i class="fas fa-camera fa-7x"></i>
    <i class="fas fa-camera fa-10x"></i>
</div>
</div></div><div class="tab-pane" id="third-unique-name-3"><figure class="highlight html"><figcaption><span>html</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">&quot;font-size: 20px;&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera fa-xs&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera fa-sm&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera fa-lg&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera fa-2x&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera fa-3x&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera fa-5x&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera fa-7x&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-camera fa-10x&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<div align="left">
  示例：
  <div style="font-size: 20px;">
    <i class="fas fa-camera fa-xs"></i>
    <i class="fas fa-camera fa-sm"></i>
    <i class="fas fa-camera fa-lg"></i>
    <i class="fas fa-camera fa-2x"></i>
    <i class="fas fa-camera fa-3x"></i>
    <i class="fas fa-camera fa-5x"></i>
    <i class="fas fa-camera fa-7x"></i>
    <i class="fas fa-camera fa-10x"></i>
  </div>
</div></div></div></div>

<h3 id="2-2-进阶应用"><a href="#2-2-进阶应用" class="headerlink" title="2.2 进阶应用"></a><font size=3>2.2 进阶应用</font></h3><p>这里的进阶应用中不写基础应用中可用样式，但是可以在基础应用的条件下增加进阶应用的这些样式，两者可以并存。</p>
<div class="note info"><p><i class="fas fa-fan fa-spin" style="color: #FF1493;font-size: 1.3rem"></i>官方参考文档：<a href="https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons" target="_blank">fontawesome官方帮助文档<i class="fa fa-external-link-alt"></i></a></p>
</div>

<h4 id="2-2-1-旋转图标"><a href="#2-2-1-旋转图标" class="headerlink" title="2.2.1 旋转图标"></a><font size=3>2.2.1 旋转图标</font></h4><details class="note info no-icon"><summary><p>点击查看旋转变量对应关系</p>
</summary>
<table>
    <tr><td align="center">Class</td><td align="left">Rotation Amount</td></tr>
    <tr><td align="center">fa-rotate-90</td><td align="left">90°</td></tr>
    <tr><td align="center">fa-rotate-180</td><td align="left">180°</td></tr>
    <tr><td align="center">fa-rotate-270</td><td align="left">270°</td></tr>
    <tr><td align="center">fa-flip-horizontal</td><td align="left">mirrors icon horizontally</td></tr>
    <tr><td align="center">fa-flip-vertical</td><td align="left">mirrors icon vertically</td></tr>
    <tr><td align="center">fa-flip-both</td><td align="left">mirrors icon vertically and horizontally (requires 5.7.0 or greater)</td></tr>
</table>
</details>

<div class="tabs" id="fourth-unique-name"><ul class="nav-tabs"><li class="tab active"><a href="#fourth-unique-name-1">Rotating Icons</a></li><li class="tab"><a href="#fourth-unique-name-2">Rotating+Flipping</a></li></ul><div class="tab-content"><div class="tab-pane active" id="fourth-unique-name-1"><figure class="highlight html"><figcaption><span>html</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;fa-3x&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-snowboarding&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-snowboarding fa-rotate-90&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-snowboarding fa-rotate-180&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-snowboarding fa-rotate-270&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-snowboarding fa-flip-horizontal&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-snowboarding fa-flip-vertical&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-snowboarding fa-flip-both&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<div align="left">
  示例：
  <div class="fa-3x">
    <i class="fas fa-snowboarding"></i>
    <i class="fas fa-snowboarding fa-rotate-90"></i>
    <i class="fas fa-snowboarding fa-rotate-180"></i>
    <i class="fas fa-snowboarding fa-rotate-270"></i>
    <i class="fas fa-snowboarding fa-flip-horizontal"></i>
    <i class="fas fa-snowboarding fa-flip-vertical"></i>
    <i class="fas fa-snowboarding fa-flip-both"></i>
  </div>
</div></div><div class="tab-pane" id="fourth-unique-name-2"><figure class="highlight html"><figcaption><span>html</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;fa-3x&quot;</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- A icon that&#x27;s rotated 90 degress and flipped horizontally --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;fa-rotate-90&quot;</span> <span class="attr">style</span>=<span class="string">&quot;display: inline-block;&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-snowboarding fa-flip-horizontal&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!-- A icon that&#x27;s flipped horizontally and rotated 90 degrees  --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;fa-flip-horizontal&quot;</span> <span class="attr">style</span>=<span class="string">&quot;display: inline-block;&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-snowboarding fa-rotate-90&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!-- A icon that&#x27;s flipped vertically and rotated 270 degress  --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;fa-flip-vertical&quot;</span> <span class="attr">style</span>=<span class="string">&quot;display: inline-block;&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-snowboarding fa-rotate-270&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!-- A icon that&#x27;s rotated 270 degress and flipped vertically --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;fa-rotate-270&quot;</span> <span class="attr">style</span>=<span class="string">&quot;display: inline-block;&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-snowboarding fa-flip-vertical&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!-- A icon that&#x27;s flipped on both axes and arbitrarily rotated 45 degress  --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;fa-flip-both&quot;</span> <span class="attr">style</span>=<span class="string">&quot;display: inline-block;&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-snowboarding fa-rotate-by&quot;</span> <span class="attr">style</span>=<span class="string">&quot;--fa-rotate-angle: 45deg;&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!-- A icon that&#x27;s arbitrarily rotated 45 degres and flipped on both axes  --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;fa-rotate-by&quot;</span> <span class="attr">style</span>=<span class="string">&quot;display: inline-block; --fa-rotate-angle: 45deg;&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-snowboarding fa-flip-both&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<div align="left">
  示例：
  <div class="fa-3x">
    <!-- A icon that's rotated 90 degress and flipped horizontally -->
    <span class="fa-rotate-90" style="display: inline-block;">
      <i class="fas fa-snowboarding fa-flip-horizontal"></i>
    </span>
    <!-- A icon that's flipped horizontally and rotated 90 degrees  -->
    <span class="fa-flip-horizontal" style="display: inline-block;">
      <i class="fas fa-snowboarding fa-rotate-90"></i>
    </span>
    <!-- A icon that's flipped vertically and rotated 270 degress  -->
    <span class="fa-flip-vertical" style="display: inline-block;">
      <i class="fas fa-snowboarding fa-rotate-270"></i>
    </span>
    <!-- A icon that's rotated 270 degress and flipped vertically -->
    <span class="fa-rotate-270" style="display: inline-block;">
      <i class="fas fa-snowboarding fa-flip-vertical"></i>
    </span>
    <!-- A icon that's flipped on both axes and arbitrarily rotated 45 degress  -->
    <span class="fa-flip-both" style="display: inline-block;">
      <i class="fas fa-snowboarding fa-rotate-by" style="--fa-rotate-angle: 45deg;"></i>
    </span>
    <!-- A icon that's arbitrarily rotated 45 degres and flipped on both axes  -->
    <span class="fa-rotate-by" style="display: inline-block; --fa-rotate-angle: 45deg;">
      <i class="fas fa-snowboarding fa-flip-both"></i>
    </span>
  </div>
</div></div></div></div>

<h4 id="2-2-2-动态图标"><a href="#2-2-2-动态图标" class="headerlink" title="2.2.2 动态图标"></a><font size=3>2.2.2 动态图标</font></h4><figure class="highlight html"><figcaption><span>html</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-bullhorn fa-spin&quot;</span> <span class="attr">style</span>=<span class="string">&quot;color: #FF1493;font-size: 1.3rem&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-fan fa-spin&quot;</span> <span class="attr">style</span>=<span class="string">&quot;color: #FF1493;font-size: 1.3rem&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br></pre></td></tr></table></figure>

<div align="left">
  示例：
  <i class="fas fa-bullhorn fa-spin" style="color: #FF1493;font-size: 1.3rem"></i>
  <i class="fas fa-fan fa-spin" style="color: #FF1493;font-size: 1.3rem"></i>
</div>

<h1 id="二、iconfont阿里矢量图标库"><a href="#二、iconfont阿里矢量图标库" class="headerlink" title="二、iconfont阿里矢量图标库"></a><font size=3>二、<code>iconfont</code>阿里矢量图标库</font></h1><p>阿里矢量图标库中的图标较为丰富，有许多<code>Font Awesome</code>没有的图标，也含有许多的多色图标，下边就介绍如何在<code>NexT</code>中使用该图标库。</p>
<h2 id="1-登录注册"><a href="#1-登录注册" class="headerlink" title="1. 登录注册"></a><font size=3>1. 登录注册</font></h2><p>首先去官网进行注册：<a target="_blank" rel="noopener" href="https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2" traget="_blank">阿里巴巴矢量图标库<i class="fa fa-external-link-alt"></i></a>，也可以使用自己的<code>Github</code>账号直接登录。</p>
<h2 id="2-挑选图标"><a href="#2-挑选图标" class="headerlink" title="2. 挑选图标"></a><font size=3>2. 挑选图标</font></h2><p>进入首页之后选择菜单栏的【图标库】，然后按下图箭头所指进行自己想要图标的添加，这样会把自己的这些图标添加到购物车。</p>
<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV02-NexT-05-%E5%9B%BE%E6%A0%87%E5%BA%93/img/007iconfont1.png" style="zoom:50%;" >

<h2 id="3-添加到项目"><a href="#3-添加到项目" class="headerlink" title="3. 添加到项目"></a><font size=3>3. 添加到项目</font></h2><p>挑选完图标后，点击界面右上角的购物车图标，此时会在右侧弹出如下界面，然后按箭头添加到项目即可，若还未创建项目，则可按照提示进行项目创建，或者自己提前创建好项目，此处不再提示如何创建项目。</p>
<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV02-NexT-05-%E5%9B%BE%E6%A0%87%E5%BA%93/img/007iconfont2.png" style="zoom: 38%;" />

<h2 id="4-生成代码"><a href="#4-生成代码" class="headerlink" title="4. 生成代码"></a><font size=3>4. 生成代码</font></h2><p>添加自己选择的图标到项目之后，可以到【我的项目】界面，如下图所示，该图标库有三种引用方式，分别是<code>Unicode</code>、<code>Font class</code>和<code>Symbol</code>，选择自己想用的引用方式，点击下方的【<strong>点此生成</strong>】即可生成相应的引用方式，另外要注意的是，不管哪种引用方式，在新增或者删除图标的时候，引用代码都需要进行<strong>更新</strong>，相应的站点中的相应文件内容也需要更新。</p>
<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV02-NexT-05-%E5%9B%BE%E6%A0%87%E5%BA%93/img/007iconfont3.png" style="zoom: 45%;" >

<h2 id="5-图标引用"><a href="#5-图标引用" class="headerlink" title="5. 图标引用"></a><font size=3>5. 图标引用</font></h2><div class="note info"><p><i class="fas fa-fan fa-spin" style="color: #FF1493;font-size: 1.3rem"></i>官方参考文档：<a href="https://www.iconfont.cn/help/detail?helptype=code" target="_blank">阿里巴巴矢量图标库使用帮助文档<i class="fa fa-external-link-alt"></i></a></p>
</div>

<div class="tabs" id="fifth-unique-name"><ul class="nav-tabs"><li class="tab active"><a href="#fifth-unique-name-1">Unicode</a></li><li class="tab"><a href="#fifth-unique-name-2">Font class</a></li><li class="tab"><a href="#fifth-unique-name-3">Symbol</a></li></ul><div class="tab-content"><div class="tab-pane active" id="fifth-unique-name-1"><p><code>unicode</code>是字体在网页端最原始的应用方式，特点是：</p>
<ul>
<li>兼容性最好，支持<code>ie6+</code>，及所有现代浏览器。</li>
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
<li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
</ul>
<div class="note warning"><p>注意：新版<code>iconfont</code>支持多色图标，这些多色图标在<code>unicode</code>模式下将不能使用，如果有需求建议使用<code>symbol</code>的引用方式</p>
</div>


<details class="note info no-icon"><summary><p>点击查看使用步骤</p>
</summary>
<p><code>unicode</code>使用步骤如下：</p>
<ul>
<li>第一步：拷贝自己项目下面生成的<code>font-face</code>，并添加到样式文件</li>
</ul>
<p>我这里是自己新建了一个单独的<code>iconfont.styl</code>文件来存放阿里矢量图标库的样式代码，并在<code>[blogRoot]/source/_data/styles.styl</code>进行引用。</p>
<figure class="highlight stylus"><figcaption><span>stylus [blogRoot]/source/_data/iconfont.styl</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@font-face</span> &#123;<span class="attribute">font-family</span>: <span class="string">&#x27;iconfont&#x27;</span>;</span><br><span class="line">    <span class="attribute">src</span>: <span class="built_in">url</span>(<span class="string">&#x27;iconfont.eot&#x27;</span>);</span><br><span class="line">    <span class="attribute">src</span>: <span class="built_in">url</span>(<span class="string">&#x27;iconfont.eot?#iefix&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;embedded-opentype&#x27;</span>),</span><br><span class="line">    <span class="built_in">url</span>(<span class="string">&#x27;iconfont.woff&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;woff&#x27;</span>),</span><br><span class="line">    <span class="built_in">url</span>(<span class="string">&#x27;iconfont.ttf&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;truetype&#x27;</span>),</span><br><span class="line">    <span class="built_in">url</span>(<span class="string">&#x27;iconfont.svg#iconfont&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;svg&#x27;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>第二步：在<code>iconfont.styl</code>文件中定义使用iconfont的样式</li>
</ul>
<figure class="highlight stylus"><figcaption><span>stylus [blogRoot]/source/_data/iconfont.styl</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">.iconfont&#123;</span><br><span class="line">    <span class="attribute">font-family</span>:<span class="string">&quot;iconfont&quot;</span> <span class="meta">!important</span>;</span><br><span class="line">    <span class="attribute">font-size</span>:<span class="number">16px</span>;<span class="attribute">font-style</span>:normal;</span><br><span class="line">    -webkit-<span class="attribute">font-smoothing</span>: antialiased;</span><br><span class="line">    -webkit-text-stroke-<span class="attribute">width</span>: <span class="number">0.2px</span>;</span><br><span class="line">    -moz-osx-<span class="attribute">font-smoothing</span>: grayscale;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>第三步：挑选相应图标并获取字体编码，应用于页面</li>
</ul>
<figure class="highlight html"><figcaption><span>html</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;iconfont&quot;</span>&gt;</span><span class="symbol">&amp;#x33;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>效果如下图：</p>
<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV02-NexT-05-%E5%9B%BE%E6%A0%87%E5%BA%93/img/007iconfont4.png" style="zoom:80%;" >

</details></div><div class="tab-pane" id="fifth-unique-name-2"><p><code>font-class</code>是<code>unicode</code>使用方式的一种变种，主要是解决<code>unicode</code>书写不直观，语意不明确的问题。</p>
<p>与<code>unicode</code>使用方式相比，具有如下特点：</p>
<ul>
<li>兼容性良好，支持<code>ie8+</code>，及所有现代浏览器。</li>
<li>相比于<code>unicode</code>语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
<li>因为使用<code>class</code>来定义图标，所以当要替换图标时，只需要修改<code>class</code>里面的<code>unicode</code>引用。</li>
<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
</ul>
<details class="note info no-icon"><summary><p>点击查看使用步骤</p>
</summary>
<p><code>font-class</code>使用步骤如下：</p>
<ul>
<li>第一步：拷贝自己项目下面生成的<code>font-face</code>，并添加到样式文件</li>
</ul>
<p>项目中的该种引用方式生成的代码是一个<code>css</code>链接格式，这样的话在<code>styl</code>文件中怎么引用都没有成功，所以就按下边的方法在模板渲染文件中直接加载这个样式文件啦。</p>
<figure class="highlight plaintext"><figcaption><span>nunjuck [blogRoot]/source/_data/head.njk</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;link href=&quot;http://at.alicdn.com/t/font_8d5l8fzk5b87iudi.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;</span><br></pre></td></tr></table></figure>
<p>不过呢，我这里是自己新建了一个单独的<code>iconfont.styl</code>文件来存放阿里矢量图标库的样式代码，所以我就将链接中的样式文件给复制下来，并在<code>[blogRoot]/source/_data/styles.styl</code>进行引用，具体代码可以查看自己项目中相应链接中的内容。</p>
<ul>
<li>第二步：挑选相应图标并获取类名，应用于页面<figure class="highlight html"><figcaption><span>html</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;iconfont icon-xxx&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
<div align="left">
  示例：<i class="iconfont icon-shoujizhuti_15bianqian"></i>
</div>
</details></div><div class="tab-pane" id="fifth-unique-name-3"><p><code>Symbol</code>是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个<code>svg</code>的集合，与前面两种相比具有如下特点：</p>
<ul>
<li>支持多色图标了，不再受单色限制。</li>
<li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
<li>兼容性较差，支持 <code>ie9+</code>,及现代浏览器。</li>
<li>浏览器渲染<code>svg</code>的性能一般，还不如<code>png</code>。</li>
</ul>
<details class="note info no-icon"><summary><p>点击查看使用步骤</p>
</summary>
<p><code>Symbol</code>使用步骤如下：</p>
<ul>
<li>第一步：拷贝项目下面生成的<code>symbol</code>代码并在相应文件引用</li>
</ul>
<p>由于该种方式生成的是一种脚本文件，所以可以在布局模板文件的注入文件<code>custom-Scripts.njk</code>进行引用使用。</p>
<figure class="highlight plaintext"><figcaption><span>nunjuck [blogRoot]/source/_data/custom-Scripts.njk</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=&quot;//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js&quot;&gt;&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>第二步：加入通用css代码（引入一次就行）</li>
</ul>
<p>我这里是自己新建了一个单独的<code>iconfont.styl</code>文件来存放阿里矢量图标库的样式代码，并在<code>[blogRoot]/source/_data/styles.styl</code>进行引用。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.icon &#123;</span><br><span class="line">    width: 1em; height: 1em;</span><br><span class="line">    vertical-align: -0.15em;</span><br><span class="line">    fill: currentColor;</span><br><span class="line">    overflow: hidden;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>第三步：挑选相应图标并获取类名，应用于页面</li>
</ul>
<figure class="highlight html"><figcaption><span>html</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">svg</span> <span class="attr">class</span>=<span class="string">&quot;icon&quot;</span> <span class="attr">aria-hidden</span>=<span class="string">&quot;true&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">use</span> <span class="attr">xlink:href</span>=<span class="string">&quot;#icon-xxx&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">use</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">svg</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>效果如下图，可以发现该种引用方式可以直接显示多色图标：</p>
<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV02-NexT-05-%E5%9B%BE%E6%A0%87%E5%BA%93/img/007iconfont5.png" style="zoom: 80%;" >

</details></div></div></div>



<p>对于我来说，还是选择了<code>font-class</code>这种方式，因为这种方式跟<code>Font Awesome</code>是兼容的，不想修改源码的话，这个应该是最方便替换<code>Font Awesome</code>图标的，但是有些地方替换后大小可能与之前不符，在样式里对相应的地方进行修改就可以啦，似乎黑白配色跟<code>NexT</code>才更加相符，我不是很追求图标的颜色多样，方便使用就可以啦，哈哈(ฅ&gt;ω&lt;*ฅ)。</p>

    </div>

    
    
    

    <footer class="post-footer">




    <div>
        
            <div style="text-align:center;color: #ccc;font-size:14px;">
            ----------本文结束
            <i class="fas fa-fan fa-spin" style="color: #FF1493; font-size: 1rem"></i>
            感谢您的阅读----------
            </div>
        
    </div>





  
  <div class="my_post_copyright"> 
    <p><span>文章标题:</span><a href="/post/1a4570fb.html">LV02-NexT-05-图标库</a></p>
    <p><span>文章作者:</span><a href="/" title="欢迎访问 《苏木》 的学习笔记">苏木</a></p>
    <p><span>发布时间:</span>2023年07月02日 - 16:17</p>
    <p><span>最后更新:</span>2025年06月14日 - 00:25</p>
    <p><span>原始链接:</span><a href="/post/1a4570fb.html" title="LV02-NexT-05-图标库">https://sumumm.github.io/post/1a4570fb.html</a></p>
    <p><span>许可协议:</span><i class="fab fa-creative-commons"></i> <a rel="license" href= "https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
  </div>
  


          <div class="post-tags">
              <a href="/tags/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/" rel="tag"><i class="fa fa-tag"></i> 博客搭建</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/post/33c24dbd.html" rel="prev" title="LV03-Markdown-01-特殊符号">
                  <i class="fa fa-angle-left"></i> LV03-Markdown-01-特殊符号
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/post/49fd6ef9.html" rel="next" title="LV02-NexT-04-fancybox">
                  LV02-NexT-04-fancybox <i class="fa fa-angle-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">

  <div class="copyright">
    &copy; 2017 – 
    <span itemprop="copyrightYear">2025</span>
    <span class="with-love">
      <i class="fa fa-heart"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">苏木</span>
  </div>
<div class="wordcount">
  <span class="post-meta-item">
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-line"></i>
    </span>
      <span>站点总字数：</span>
    <span title="站点总字数">3.7m</span>
  </span>
  <span class="post-meta-item">
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
      <span>站点阅读时长 &asymp;</span>
    <span title="站点阅读时长">225:26</span>
  </span>
</div>




    <span id="sitetime"></span>
    <script defer language=javascript>
        function siteTime()
        {
            window.setTimeout("siteTime()", 1000);
            var seconds = 1000;
            var minutes = seconds * 60;
            var hours = minutes * 60;
            var days = hours * 24;
            var years = days * 365;
            var today = new Date();
            var todayYear = today.getFullYear();
            var todayMonth = today.getMonth()+1;
            var todayDate = today.getDate();
            var todayHour = today.getHours();
            var todayMinute = today.getMinutes();
            var todaySecond = today.getSeconds();
            /*==================================================
            Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
            year        - 作为date对象的年份，为4位年份值
            month       - 0-11之间的整数，做为date对象的月份
            day         - 1-31之间的整数，做为date对象的天数
            hours       - 0(午夜24点)-23之间的整数，做为date对象的小时数
            minutes     - 0-59之间的整数，做为date对象的分钟数
            seconds     - 0-59之间的整数，做为date对象的秒数
            microseconds - 0-999之间的整数，做为date对象的毫秒数
            ==================================================*/
            var t1 = Date.UTC(2017, 
                              5, 
                              19, 
                              0, 
                              0, 
                              0); //北京时间
            var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
            var diff = t2-t1;
            var diffYears = Math.floor(diff/years);
            var diffDays = Math.floor((diff/days)-diffYears*365);
            var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
            var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
            var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
            document.getElementById("sitetime").innerHTML="已在这里 "+diffYears+" 年 "+diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒";
        }
        siteTime();
    </script>



    </div>
  </footer>

  
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up fa-lg"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/next-theme-pjax/0.6.0/pjax.min.js" integrity="sha256-vxLn1tSKWD4dqbMRyv940UYw4sXgMtYcK6reefzZrao=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/5.0.28/fancybox/fancybox.umd.js" integrity="sha256-ytMJGN3toR+a84u7g7NuHm91VIR06Q41kMWDr2pq7Zo=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lozad.js/1.16.0/lozad.min.js" integrity="sha256-mOFREFhqmHeQbXpK2lp4nA3qooVgACfh88fpJftLBbc=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script><script src="/js/pjax.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-generator-searchdb/1.4.1/search.js" integrity="sha256-1kfA5uHPf65M5cphT2dvymhkuyHPQp5A53EGZOnOLmc=" crossorigin="anonymous"></script>
<script src="/js/third-party/search/local-search.js"></script>




  <script src="/js/third-party/fancybox.js"></script>

  <script src="/js/third-party/pace.js"></script>


  




  

  <script class="next-config" data-name="enableMath" type="application/json">false</script><script class="next-config" data-name="mathjax" type="application/json">{"enable":true,"tags":"none","js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.js","integrity":"sha256-MASABpB4tYktI2Oitl4t+78w/lyA+D7b/s9GEP0JOGI="}}</script>
<script src="/js/third-party/math/mathjax.js"></script>


 
        <div id="click-show-text"
            data-mobile = false
            data-text = 富强,民主,文明,和谐,自由,平等,公正,法制,爱国,敬业,诚信,友善
            data-fontsize = 15px
            data-random= false>
        </div>
       

      
        <script async src=https://cdn.jsdelivr.net/npm/hexo-next-mouse-effect@latest/click/showText.js></script>
      

      
    




    <script async src="/js/fancybox_param.js"></script>





<!-- APlayer本体 -->



</body>
</html>
